<template>
  <el-drawer
    v-model="show_condition_setup_box"
    direction="rtl"
    size="80%"
    :close-on-click-modal="false"
    @close="EventBus.emit('close_condition_setup_box')"
  >
    <template #title>
      <h4 v-if="show_condition_setup_box_type == 'display'">展示条件配置</h4>
      <h4 v-if="show_condition_setup_box_type == 'readOnly'">只读条件配置</h4>
    </template>
    <template #default>
      <p>
        提示：只有类型为
        <b>普通选择框，单选框，多选框，级联选择器，开关</b>
        其一的控件可作为配置条件，<b>且不可互为条件</b>
      </p>
      <el-table :data="table_list" border class="tc m_top10">
        <el-table-column label="字段选择">
          <template #default="scope">
            <el-select
              style="margin-top: 10px"
              v-model="scope.row.code"
              @change="(e) => change_pre_conditions(e, scope.$index)"
              placeholder="请选择参数"
            >
              <el-option
                v-for="item in select_option_list"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              ></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="字段code" prop="code"></el-table-column>
        <el-table-column label="字段值">
          <template #default="scope">
            <selector :item1="scope.row.item" :selector_type="'condition'"></selector>
          </template>
        </el-table-column>
        <el-table-column label="相邻字段间关联关系">
          <template #default="scope">
            <el-select
              v-if="scope.$index < table_list.length - 1"
              v-model="scope.row.relate"
              placeholder="关联关系"
              style="width: 100px"
            >
              <el-option label="并且" value="&&"></el-option>
              <el-option label="或者" value="||"></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button @click="table_list.splice(scope.$index, 1)"> 删除 </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-button class="m_10_0" type="primary" @click="add_row">追加行</el-button>
      <el-divider> </el-divider>
      <div class="tc m_top10">
        <el-button type="primary" @click="save_condition_list">保存</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script lang="ts" setup>
import { ref, toRefs, watch } from "vue";
import { ElMessage } from "element-plus";
import EventBus from "@/utils/EventBus";
import { useStore } from "vuex";
import selector from "./selector.vue";
const store = useStore();
const props = defineProps({
  show_condition_setup_box: Boolean,
  show_condition_setup_box_type: String,
  condition_setup_code: String, // 当前项code
  form_list: Array,
  form_index: Number,
  position: String,
});
const {
  show_condition_setup_box,
  show_condition_setup_box_type,
  condition_setup_code,
  form_list,
  form_index,
  position,
} = toRefs<any>(props);
const table_list = ref([]);
const add_row = () => {
  if (
    table_list.value.some((i) => {
      return i.code == "" || i.item.value == "";
    })
  ) {
    ElMessage.warning("请为每一行选择字段值");
    return;
  }
  let obj = {
    code: "",
    value: "",
    relate: "||",
    item: {},
  };
  table_list.value.push(obj);
};
const change_pre_conditions = (...e) => {
  console.log(e);
  let item = select_option_list.value.filter((ii) => {
    return ii.code == e[0];
  });
  table_list.value[e[1]].item = JSON.parse(JSON.stringify(item[0]));
};
watch(
  () => show_condition_setup_box.value,
  (a, b) => {
    if (a) {
      get_select_option_list();
    }
  }
);
const save_condition_list = () => {
  let arr = store.state.condition_setup_list;
  table_list.value.forEach((i) => {
    i.value = i.item.value;
  });
  if (
    table_list.value.some((i) => {
      return i.value == "";
    })
  ) {
    ElMessage.warning("请为每一行选择字段值");
    return;
  }
  let obj = {
    code: condition_setup_code.value,
    position: position.value,
    condition_list: [
      {
        type: show_condition_setup_box_type.value,
        children_list: JSON.parse(JSON.stringify(table_list.value)),
      },
    ],
  };

  let has_condition = arr.some((item, index) => {
    if (item.code == obj.code) {
      let has_condition_children = item.condition_list.some((item1) => {
        if (item1.type == obj.condition_list[0].type) {
          item1.children_list = obj.condition_list[0].children_list;
        }
        return item1.type == obj.condition_list[0].type;
      });
      if (!has_condition_children) {
        item.condition_list.push(obj.condition_list[0]);
      }
    }
    return item.code == obj.code;
  });
  if (!has_condition) {
    arr.push(obj);
  }
  console.log(arr);
  store.commit("set_condition_setup_list", arr);
  ElMessage.success("操作成功！");
};
watch(
  () => show_condition_setup_box.value,
  (a, b) => {
    if (a) {
      form_index.value = 0;
      get_select_option_list();
    }
  }
);
const select_option_list = ref([]);
const get_select_option_list = () => {
  let type_list = ["select", "radio", "checkBox", "tree", "switch"];
  store.state.condition_setup_list.some((i) => {
    if (i.code == condition_setup_code.value) {
      i.condition_list.some((ii) => {
        if (ii.type == show_condition_setup_box_type.value) {
          table_list.value = ii.children_list;
        }
        return ii.type == show_condition_setup_box_type.value;
      });
    }
    return i.code == condition_setup_code.value;
  });
  // 列表数据
  select_option_list.value = [];
  // 不可互为条件的判断
  // 将当前字段作为条件的 codelist
  let has_curr_code_condition_list = [];
  store.state.condition_setup_list.forEach((item) => {
    item.condition_list.forEach((item1) => {
      if (
        item1.children_list.some((item2) => {
          return item2.code == condition_setup_code.value;
        })
      ) {
        has_curr_code_condition_list.push(item.code);
      }
    });
  });
  let curr_form_data = JSON.parse(
    JSON.stringify(form_list.value[form_index.value].layout_list)
  );

  curr_form_data.forEach((item) => {
    item.children_list.forEach((item1) => {
      // 排除空白，当前，类型不符合，互为条件 的项
      if (
        item1.code &&
        item1.code != condition_setup_code.value &&
        type_list.includes(item1.item_type) &&
        !has_curr_code_condition_list.includes(item1.code)
      ) {
        item1.relate = "&&";
        select_option_list.value.push(JSON.parse(JSON.stringify(item1)));
      }
    });
  });
  console.log(select_option_list.value);
};
</script>

<style lang="scss" scoped>
.pre_group_box {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  .pre_group_list {
    display: flex;
    align-items: center;
    > div {
      margin-right: 20px;
    }

    > div:nth-child(odd) {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 10px;
      border: 1px solid #ccc;
    }
    .pre_group_select {
      color: #3580eb !important;
      border-color: #3580eb !important;
    }
  }
}
</style>
